<template>
  <div class="action-columns" ref="root">
      <a-popover v-model="visible" placement="bottomRight" trigger="click" :get-popup-container="() => $refs.root">
        <div slot="title">
          <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" class="check-all" />列展示
          <a-button @click="resetColumns" style="float: right" type="link" size="small">重置</a-button>
        </div>
        <a-list style="width: 100%" size="small" :key="i" v-for="(col, i) in columns" slot="content">
          <a-list-item>
            <a-checkbox v-model="col.visible" @change="e => onCheckChange(e, col)"/>
            <template v-if="col.title">
              {{col.title}}:
            </template>
            <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
            <template slot="actions">
              <a-tooltip title="固定在列头" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="['left', {active: col.fixed === 'left'}]" @click="fixColumn('left', col)" type="vertical-align-top" />
              </a-tooltip>
              <a-tooltip title="固定在列尾" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="['right', {active: col.fixed === 'right'}]" @click="fixColumn('right', col)" type="vertical-align-bottom" />
              </a-tooltip>
              <a-tooltip title="添加搜索" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="{active: col.searchAble}" @click="setSearch(col)" type="search" />
              </a-tooltip>
            </template>
          </a-list-item>
        </a-list>
        <a-icon class="action" type="setting" />
      </a-popover>
  </div>
</template>

<script>
import cloneDeep from 'lodash.clonedeep'

export default {
  name: 'ActionColumns',
  props: ['columns', 'visibleColumns'],
  data() {
    return {
      visible: false,
      indeterminate: false,
      checkAll: true,
      checkedCounts: this.columns.length,
      backColumns: cloneDeep(this.columns)
    }
  },
  watch: {
    checkedCounts(val) {
      this.checkAll = val === this.columns.length
      this.indeterminate = val > 0 && val < this.columns.length
    },
    columns(newVal, oldVal) {
      if (newVal != oldVal) {
        this.checkedCounts = newVal.length
        this.formatColumns(newVal)
      }
    }
  },
  created() {
    this.formatColumns(this.columns)
  },
  methods: {
    onCheckChange(e, col) {
      if (!col.visible) {
        this.checkedCounts -= 1
      } else {
        this.checkedCounts += 1
      }
    },
    fixColumn(fixed, col) {
      if (fixed !== col.fixed) {
        this.$set(col, 'fixed', fixed)
      } else {
        this.$set(col, 'fixed', undefined)
      }
    },
    setSearch(col) {
      this.$set(col, 'searchAble', !col.searchAble)
      if (!col.searchAble && col.search) {
        this.resetSearch(col)
      }
    },
    resetSearch(col) {
      // col.search.value = col.dataType === 'boolean' ? false : undefined
      col.search.value = undefined
      col.search.backup = undefined
    },
    resetColumns() {
      const {columns, backColumns} = this
      let counts = columns.length
      backColumns.forEach((back, index) => {
        const column = columns[index]
        column.visible = back.visible === undefined || back.visible
        if (!column.visible) {
          counts -= 1
        }
        if (back.fixed !== undefined) {
          column.fixed = back.fixed
        } else {
          this.$set(column, 'fixed', undefined)
        }
        this.$set(column, 'searchAble', back.searchAble)
        // column.searchAble = back.searchAble
        this.resetSearch(column)
      })
      this.checkedCounts = counts
      this.visible = false
      this.$emit('reset', this.getConditions(columns))
    },
    onCheckAllChange(e) {
      if (e.target.checked) {
        this.checkedCounts = this.columns.length
        this.columns.forEach(col => col.visible = true)
      } else {
        this.checkedCounts = 0
        this.columns.forEach(col => col.visible = false)
      }
    },
    getConditions(columns) {
      const conditions = {}
      columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null)
        .forEach(col => {
          conditions[col.dataIndex] = col.search.value
        })
      return conditions
    },
    formatColumns(columns) {
      for (let col of columns) {
        if (col.visible === undefined) {
          this.$set(col, 'visible', true)
        }
        if (!col.visible) {
          this.checkedCounts -= 1
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.action-columns{
  display: inline-block;
  .check-all{
    margin-right: 8px;
  }
  .left,.right{
    transform: rotate(-90deg);
  }
  .active{
    color: @primary-color;
  }
}
</style>